<template>
	<div class="bottombar" v-if="mobileNavigationBar.open">
		<sui-menu :widths="2" style="background-color:white;width: 100%;">
			<a class="bottom-item" is="sui-menu-item" v-for="item in header.items" :active="isActive(item.name)" :key="item.name" :content="item.name" @click="selectHeaderMenu(item.name),shift(item.path)" />
		</sui-menu>
	</div>
</template>
<script>
import { mapActions } from "vuex";
import { mapGetters } from "vuex";
import string from "@/mixins/string";
import router from "@/mixins/router";
export default {
  name: "zui-header",
  mixins: [string, router],
  computed: {
    ...mapGetters(["header", "mobileNavigationBar"])
  },
  methods: {
    ...mapActions(["selectHeaderMenu"]),
    isActive(name) {
      return this.header.active === name;
    },
    shift(path) {
      this.$router.push(path);
    }
  }
};
</script>

<style lang="less" scoped>
@tablet: 992px;
@mobile: 768px;
.ui.menu:not(.vertical) {
  & > .item.i-mobile {
    display: flex;
    @media (min-width: @mobile) {
      display: none;
    }
  }
  & > .menu {
    display: none;
    @media (min-width: @mobile) {
      display: flex;
    }
  }
  .right.menu {
    & /deep/ .i-search-menu {
      @media (max-width: @mobile) {
        padding-right: 1px;
        padding-left: 0px;
      }
    }
    & > .item.i-mobile {
      display: none;
      @media (min-width: @mobile) {
        display: flex;
      }
    }
    & > .item.i-tablet {
      display: none;
      @media (max-width: @mobile) {
        display: flex;
      }
      &:hover {
        background: none;
      }
      & /deep/ .icon {
        color: black;
      }
    }
  }
}
.bottombar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  border-top: 1px solid #ede7f3;
  background: #fbfafc;
  height: 3.5rem;
  display: block;
  @media (min-width: 768px) {
    display: none;
  }
}
</style>
